<template>
  <div class="storeFilter">
    <div class="contont">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区市县："
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom" :lazy-render="false">
        <van-cascader
          v-model="countyId"
          :field-names="fieldNames"
          title="请选择所在地区"
          :options="cityList"
          @close="show = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>
    </div>
    <div class="contont">
      <van-field
        v-model="type"
        is-link
        readonly
        label="套餐类型："
        placeholder="请选择套餐类型"
        @click="typeshow = true"
      />
      <van-popup v-model="typeshow" round position="bottom">
        <van-picker
          title="选择套餐类型"
          show-toolbar
          :columns="option"
          @confirm="onConfirm2"
          @cancel="typeshow = false"
        />
      </van-popup>
    </div>
    <div class="time">
      <span class="start">开始时间：</span>
      <div class="time-r">
        <div
          @click="
            showtime = true;
            value = 1;
          "
        >
          <span style="color: #333333" v-if="starttime.datav">{{
            starttime.datav
          }}</span>
          <span v-else>选择日期</span>
          <van-icon name="arrow" />
        </div>
        <div
          style="padding-left: 20px"
          @click="
            showdata = true;
            value = 1;
          "
        >
          <span style="color: #333333" v-if="starttime.time">{{
            starttime.time
          }}</span>
          <span v-else>选择时间</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="time" style="border-top: none">
      <span class="start">截至时间：</span>
      <div class="time-r">
        <div
          @click="
            showtime = true;
            value = 2;
          "
        >
          <span style="color: #333333" v-if="endtime.datav">{{
            endtime.datav
          }}</span>
          <span v-else>选择日期</span>
          <van-icon name="arrow" />
        </div>
        <div
          style="padding-left: 20px"
          @click="
            showdata = true;
            value = 2;
          "
        >
          <span style="color: #333333" v-if="endtime.time">{{
            endtime.time
          }}</span>
          <span v-else>选择时间</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="button">
      <div class="but_left" @click="reset">重置</div>
      <div class="but_right" @click="search">查询</div>
    </div>
    <van-action-sheet v-model="showtime">
      <van-datetime-picker
        @confirm="oktime"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @cancel="showtime = false"
      />
    </van-action-sheet>
    <van-action-sheet v-model="showdata">
      <van-datetime-picker
        @cancel="showdata = false"
        v-model="currentTime"
        @confirm="okdata"
        type="time"
        title="选择时间"
        :min-hour="10"
        :max-hour="20"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import http from './service/service'
export default {
  data () {
    return {
      show: false,
      showtime: false,
      fieldValue: '',
      type: '',
      countyId: '',
      cityId: '',
      showdata: false,
      typeshow: false,
      value: 1,
      fieldNames: {
        text: 'orgname',
        value: 'orgid',
        children: 'children'
      },
      tcId: -1,
      starttime: {
        datav: '',
        time: ''
      },
      endtime: {
        datav: '',
        time: ''
      },
      currentDate: new Date(2021, 0, 17),
      currentTime: '12:00',

      cityList: [],

      option: [],
      optionid: []
    }
  },
  name: 'storeFilter',
  methods: {
    oktime (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      const time = y + '-' + m + '-' + d
      if (this.value === 2) {
        if (this.starttime.datav) {
          if (time < this.starttime.datav) {
            this.$toast.fail('截至日期不能小于开始日期')
            return
          }
        }
        this.endtime.datav = time
      } else {
        if (this.endtime.datav) {
          if (this.endtime.datav < time) {
            this.$toast.fail('截至日期不能小于开始日期')
            return
          }
        }
        this.starttime.datav = time
      }

      this.showtime = false
    },
    onChange (value) {
      const id = value.selectedOptions[0].orgid
      if (id === 0) return
      this.getcount(id)
    },
    onConfirm2 (value, index) {
      this.type = value
      this.typeshow = false
      this.tcId = this.optionid[index]
    },
    onFinish ({ selectedOptions }) {
      if (selectedOptions.length === 2) {
        this.cityId = selectedOptions[0].orgid
        this.countyId = selectedOptions[1].orgid
      } else {
        this.cityId = selectedOptions[0].orgid
        this.countyId = 0
      }
      this.show = false
      this.fieldValue = selectedOptions
        .map((option) => option.orgname)
        .join('')
    },
    okdata (value) {
      if (this.value === 1) {
        if (this.starttime.datav) {
          this.starttime.time = value
        } else {
          this.$toast.fail('请选择日期')
          return
        }
      } else {
        if (this.endtime.datav) {
          this.endtime.time = value
        } else {
          this.$toast.fail('请选择日期')
          return
        }
      }
      if (
        this.starttime.time &&
        this.endtime.time &&
        this.starttime.datav === this.endtime.datav
      ) {
        if (this.endtime.time <= this.starttime.time) {
          this.$toast.fail('截至日期不能小于或等于开始日期')
          return
        }
      }
      this.showdata = false
    },

    getcity () {
      http.cityList().then((res) => {
        if (res.data.ret === 0) {
          this.cityList = res.data.cityList
          this.cityList.forEach((element) => {
            if (element.orgname !== '全省') {
              this.$set(element, 'children', [])
            }
          })
        }
      })
    },
    reset () {
      this.starttime = {
        datav: '',
        time: ''
      }
      this.endtime = { datav: '', time: '' }
      this.type = '全部'
      this.fieldValue = '全省'
      this.tcId = -1
      this.countyId = 0
    },
    getcount (id) {
      http.countyList({ cityId: id }).then((res) => {
        if (res.data.ret === 0) {
          const countyList = res.data.countyList
          this.cityList.forEach((element, index) => {
            if (id === element.orgid) {
              this.cityList[index].children = countyList
            }
          })
        } else {
          this.$toast.fail('网络错误')
        }
      })
    },
    search () {
      this.$store.commit('teacher/editfilter', {
        starttime: this.starttime.datav
          ? this.starttime.time
            ? this.starttime.datav + ' ' + this.starttime.time
            : this.starttime.datav
          : '',
        endtime: this.endtime.datav
          ? this.endtime.time
            ? this.endtime.datav + ' ' + this.endtime.time
            : this.endtime.datav
          : '',
        tcId: this.tcId,
        type: this.type,
        cityId: this.cityId,
        countyId: this.countyId,
        fieldValue: this.fieldValue
      })
      this.$router.back()
    },
    gettype () {
      http.getTcList().then((res) => {
        if (res.data.ret === 0) {
          this.option = res.data.data.tcList.map((tcList) => tcList.tcName)
          this.optionid = res.data.data.tcList.map((tcList) => tcList.tcId)
        } else {
          this.$toast.fail('网络错误')
        }
      })
    },
    gettime () {
      const time = this.$store.state.teacher.filter.starttime
      const time2 = this.$store.state.teacher.filter.endtime
      this.endtime.datav = time2.substring(0, 10)
      this.starttime.datav = time.substring(0, 10)
      if (time.length > 12) {
        this.starttime.time = time.substring(time.length - 5, time.length)
      }
      if (time2.length > 12) {
        this.endtime.time = time2.substring(time2.length - 5, time2.length)
      }
      this.tcId = this.$store.state.teacher.filter.tcId
      this.type = this.$store.state.teacher.filter.type
      this.cityId = this.$store.state.teacher.filter.cityId
      this.countyId = this.$store.state.teacher.filter.countyId
      this.fieldValue = this.$store.state.teacher.filter.fieldValue
      if (this.countyId !== 0) {
        this.getcount((this.countyId + '').substring(0, 2))
      }
    }
  },
  created () {
    this.getcity()
    this.gettype()
    this.gettime()
  }
}
</script>

<style lang="less" scoped>
.storeFilter {
  font-family: PingFangSC-Regular, PingFang SC;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  padding-top: 10px;
  .time {
    margin: 0 16px;
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #c8c9cc;
    .start {
      width: 6.2em;
      margin-right: 12px;
      font-size: 14px;
      line-height: 24px;
      color: rgb(100, 101, 102);
    }
    .time-r {
      display: flex;
      width: calc(100% - 6.2em);
      justify-content: space-between;
      line-height: 24px;
      div {
        width: 50%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .button {
    padding: 0 16px;
    margin-top: 80px;
    display: flex;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #ffffff;
    .but_left {
      width: 41.1%;
      background-color: #ff7645;
      border-top-left-radius: 22px;
      border-bottom-left-radius: 22px;
    }
    .but_right {
      background-color: #1890ff;
      border-top-right-radius: 22px;

      border-bottom-right-radius: 22px;
      width: 58.9%;
    }
  }
}
/deep/ .van-icon {
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #bebebe;
}
</style>
